<template>
  <!-- 付款 -->
  <el-dialog
    title="付款"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    @open="onOpen"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-row class="his_body">
      <el-col :span="3">
        <div class="icon_money_box">
          <i class="iconfont iconqian"></i>
        </div>
      </el-col>
      <el-col class="total-money_box" :span="20">
        <p>应用付费</p>
        <h4>￥{{totalMoney}}</h4>
      </el-col>
    </el-row>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      @submit.native.prevent="onSubmit"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="实际应付：">
            <el-input v-model="form.payMoney" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label>
            <el-button
              v-for="(item,index) in options"
              :disabled="btnDisabled"
              @click="changePay(item.id)"
              :key="index"
            >{{item.name}}</el-button>
          </el-form-item>
        </el-col>
        <div v-if="isdreates"  class="derate_box">
          <el-form-item label="减免金额：">
            <el-input v-model="form.reductionMoney"></el-input>
          </el-form-item>
          <el-form-item label="减免原因：">
            <el-input v-model="form.note"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="btnLoading" @click="sure">确 定</el-button>
            <el-button :loading="btnLoading" @click="cancel">取 消</el-button>
          </el-form-item>
        </div> 
        <el-row v-if="isdreateMoney" style="display:inline-block;width:100%;">
            <el-col :span="24">
                <el-form-item label="减免金额：">
                    ￥{{form.reductionMoney}}
                </el-form-item>
                <el-form-item label="减免原因：">
                    {{form.note}}
                </el-form-item>
            </el-col>
        </el-row>
        <pay v-if="isPay" v-model="isPay" :item="curItem" @remove="changePay" @success="getPayMoney" :btn="btnDisabled"></pay>
        <el-col :span="24">
          <el-form-item label="选择支付方式：">
            <el-radio-group @change="changeSource()" v-model="form.source">
              <el-radio :label="7">现金</el-radio>
              <el-radio :label="10">银行卡</el-radio>
              <el-radio :label="8">支付宝</el-radio>
              <el-radio :label="9">微信</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="form.source==7" label="实收现金：">
            <el-input @blur="getDispenser" v-model="form.realityMoney"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="form.source==7 && form.realityMoney!=''" label="找零：">
             <label style="color: #DE6262!important;font-size:16px;">￥{{dispenser}}</label>
          </el-form-item>
        </el-col>
        <el-col v-if="form.source==8 || form.source==9 || form.source==10" :span="24">
          <label class="pay_label">{{form.source | changePaySource}}支付：</label>  
          ￥{{form.payMoney}}
        </el-col>
        <el-col v-if="form.source==8 || form.source==9" :span="20" style="margin-left:120px;margin-top:10px;">
          <label style="display:inline-block;width:100%;margin-bottom:10px;">请使用扫码枪读取用户手机上的条码</label>
          <el-input ref="phoneCode" v-model="code"></el-input>
        </el-col>
      </el-row>
      <el-button v-show="false" :loading="btnLoading" native-type="submit">提交</el-button>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
      <el-button :loading="btnLoading" @click="onClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Valid from "@/_js/validate.js";
export default {
  props: ["value", "item", "totalMoney"],
  data() {
    return {
      btnLoading: false,
      form: {
        payMoney: "",
        note: "",
        source:7,
        reductionMoney:0,
        realityMoney:'',//实际金额
      },
      remark:'',
      btnDisabled:false,
      code:'',
      dispenser:0,
      curItem: [],
      isdreates: false,
      isdreateMoney:false,
      isPay: false,
      options: [
        {
          name: "减免金额",
          //   disabled:false,
          id: 0
        },
        {
          name: "医保支付",
          //   disabled:false,
          id: 1
        },
        {
          name: "商保支付",
          //   disabled:false,
          id: 3
        }
      ],
      rules: {}
    };
  },
  mounted() {
    let th = this;
    th.form.payMoney = th.totalMoney;
  },
  methods: {
    //提交
    onSubmit() {
      let th = this;
      //订单子项
      let orderItems = [
        {
          orderItemId: "", //子订单id
          orderItemCode: "", //子订单编号
          orderId: "", //订单id
          patientId: "", //患者id
          hpId: th.adminUser.hpId, //医院id
          deptId: "",
          doctorId: "",
          source: 10,
          sourceId: "", //来源id
          frequency: "", //次数
          oneMoney: "", //单次金额
          totalMoney: "", //总金额
          discount:100, //折扣数
          discountMoney: "", //折扣金额
          realityMoney: "", //实际金额
          integralNum: "", //获得积分数
          remark: "", //备注
          status: "" //付款状态
        }
      ];
      let _item=[]
      // let discountMoney=0;
      if(th.curItem.length>0){
          let list=th.curItem
          for(let i=0;i<list.length;i++){
            let arr={billPayId: "",billPayCode: "",billId: "",payMoney:'',source:'', sourceId: "",remark: "", status: "", isDeleted: "" }
            arr=Object.assign(arr,list[i]);
            // discountMoney+=Number(arr.payMoney)
            arr.remark=list[i].note;
            _item.push(arr)
          }
      }
      if(th.form.source==7){
         _item.push({billPayId: "",billPayCode: "",billId: "",payMoney:th.form.realityMoney,source:th.form.source, sourceId: "",remark: "", status: "", isDeleted: "" })
         _item.push({billPayId: "",billPayCode: "",billId: "",payMoney:th.dispenser,source:11, sourceId: "",remark: "", status: "", isDeleted: "" })
      }else{
         _item.push({billPayId: "",billPayCode: "",billId: "",payMoney:th.form.payMoney,source:th.form.source, sourceId: "",remark: "", status: "", isDeleted: "" })
      }
      let j = {
        medicalRetailItem: JSON.stringify(th.item),
        orderItemsJSON: JSON.stringify(orderItems),
        reductionMoney: 0, //减免金额// 没有默认0
        orderId: 0,
        patientId: "",
        note: "", //备注
        source:2,//1、医疗  2、零售药
        hpId: th.adminUser.hpId,
        sourceId: 0,
        totalMoney: th.totalMoney, //总金额
        discountMoney:0, //子项目折扣金额总和
        recordNum: 0, //积分总数
        realityMoney: th.totalMoney, //实际金额
        finishOrder: 1, //是否结算完成  0 :未完成   1:完成
        billPaywaysJson: JSON.stringify(_item) //支付方式
      };
      if(th.form.reductionMoney!=null){
        j.reductionMoney=th.form.reductionMoney;
        j.note=th.form.note;
      }else{
        j.reductionMoney=0;
      }
      th.btnLoading=true;
      th.$api.firstPayOrder(j).then(res => {
        if(res.executed){
          th.$message.success("支付成功");
          th.onClose();
          th.$router.push({path: "/page/retailIndex"});
          // /page/retailIndex
          th.btnLoading=false;
        }else{
          th.$message.error(res.message);
          th.btnLoading=false;
        }
      }).catch(error=>{
         th.$message.error("支付失败");
         th.btnLoading=false;
      });
    },
    onOpen() {
      let th = this;
      th.$nextTick(function() {});
    },
    //支付类型
    changePay(id) {
      let th = this;
      let list=th.curItem
      if (id == 0) {
          th.isdreates = !th.isdreates;
          th.isdreateMoney=false
      }
      if (id == 1) {
        th.isPay=true;
        let num=0;
        if(list.length>0){
            for(let i=0;i<list.length;i++){
                if(list[i].source==1){
                    th.curItem.splice(i,1)
                    num=0
                }else{
                    num=1
                }
            }
            if(num==1){
                let arr={name:'医保支付',payMoney:'',source:1,note:''}
                th.curItem.push(arr)
            }
            if(th.curItem.length<1){
                th.isPay=false;
            }
        }else{
            let arr={name:'医保支付',payMoney:'',source:1,note:''}
            th.curItem.push(arr)
        }
      }
       if (id == 3) {
        th.isPay=true;
        let num=0;
        if(list.length>0){
            for(let i=0;i<list.length;i++){
                if(list[i].source==3){
                    th.curItem.splice(i,1)
                    num=0
                }else{
                    num=1;
                }
            }
            if(num==1){
                let arr={name:'商保支付',payMoney:'',source:3}
                th.curItem.push(arr)
            }
            if(th.curItem.length<1){
                th.isPay=false;
            }
        }else{
            let arr={name:'商保支付',payMoney:'',source:3}
            th.curItem.push(arr)
        }
      }
    },
    sure() {
      let th=this;
      th.isdreateMoney=true;
      th.isdreates=false;
      if(th.form.reductionMoney!='' && th.form.reductionMoney<th.form.payMoney){
        th.form.payMoney=th.form.payMoney-th.form.reductionMoney;
      }
    },
    cancel() {
      let th=this;
      th.isdreateMoney=false;
      th.isdreates=false;
    },
    getPayMoney(){
       let th=this;
       let discountMoney=0;
        if(th.curItem.length>0){
            let list=th.curItem
            for(let i=0;i<list.length;i++){
              discountMoney+=Number(list[i].payMoney)
            }
        }
        th.form.payMoney=th.form.payMoney-discountMoney
    },
    changeSource() {
      let th=this;
      th.btnDisabled=true;
      th.isdreates=false
      if(th.form.reductionMoney!=''){
        th.isdreateMoney=true
      }
      if(th.curItem.length>0){
         th.isPay=true
      }
    },
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    },
    getDispenser(){
      let th=this;
      th.dispenser=Number(th.form.realityMoney-th.form.payMoney).toFixed(2);
    }
  },
  components: {
    pay: () => import("./_com/c_pay")
  }
};
</script>
<style lang="scss" scoped>
.his_body {
  display: inline-block;
  width: 100%;
  background-color: #666 !important;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}
.icon_money_box {
  display: inline-block;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 50%;
  .iconqian {
    color: #fff;
    font-size: 26px;
    position: absolute;
    left: 10px;
    top: 10px;
  }
}
.total-money_box {
  color: #fff;
  p {
    opacity: 0.75;
  }
  h4 {
    font-size: 26px;
  }
}
.pay_label{
    width: 109px;
    display: inline-block;
    text-align: right;
}
.derate_box {
  background-color: #e4e7ea;
  margin-left: 120px;
  padding: 20px 20px 10px 0px;
  margin-bottom: 20px;
  display: inline-block;
}
</style>
